<template>
    <el-card>
        <template #header>
            <div class="card-header">
                <span>基础用法</span>
            </div>
        </template>
        <div class="mb-2 flex items-center text-sm">
            <el-radio-group v-model="radio1" class="ml-4">
            <el-radio label="1" size="large">Option 1</el-radio>
            <el-radio label="2" size="large">Option 2</el-radio>
            </el-radio-group>
        </div>
        <div class="my-2 flex items-center text-sm">
            <el-radio-group v-model="radio2" class="ml-4">
            <el-radio label="1">Option 1</el-radio>
            <el-radio label="2">Option 2</el-radio>
            </el-radio-group>
        </div>
        <div class="my-4 flex items-center text-sm">
            <el-radio-group v-model="radio3" class="ml-4">
            <el-radio label="1" size="small">Option 1</el-radio>
            <el-radio label="2" size="small">Option 2</el-radio>
            </el-radio-group>
        </div>
        <div class="mb-2 flex items-center text-sm">
            <el-radio-group v-model="radio3" disabled class="ml-4">
            <el-radio label="1" size="small">Option 1</el-radio>
            <el-radio label="2" size="small">Option 2</el-radio>
            </el-radio-group>
        </div>
    </el-card>
    <el-card class="margin-top">
        <template #header>
            <div class="card-header">
                <span>禁用状态</span>
            </div>
        </template>
        <el-radio v-model="radio" disabled label="disabled">Option A</el-radio>
        <el-radio v-model="radio" disabled label="selected and disabled">Option B</el-radio>
    </el-card>
    <el-card class="margin-top">
        <template #header>
            <div class="card-header">
                <span>单选框组</span>
            </div>
        </template>
        <el-radio-group v-model="radio11">
            <el-radio :label="3">Option A</el-radio>
            <el-radio :label="6">Option B</el-radio>
            <el-radio :label="9">Option C</el-radio>
        </el-radio-group>
    </el-card>
    <el-card class="margin-top">
        <template #header>
            <div class="card-header">
                <span>按钮样式</span>
            </div>
        </template>
        <div>
            <el-radio-group v-model="radio21" size="large">
            <el-radio-button label="New York" />
            <el-radio-button label="Washington" />
            <el-radio-button label="Los Angeles" />
            <el-radio-button label="Chicago" />
            </el-radio-group>
        </div>
        <div style="margin-top: 20px">
            <el-radio-group v-model="radio22">
            <el-radio-button label="New York" />
            <el-radio-button label="Washington" />
            <el-radio-button label="Los Angeles" />
            <el-radio-button label="Chicago" />
            </el-radio-group>
        </div>
        <div style="margin-top: 20px">
            <el-radio-group v-model="radio23" size="small">
            <el-radio-button label="New York" />
            <el-radio-button label="Washington" disabled />
            <el-radio-button label="Los Angeles" />
            <el-radio-button label="Chicago" />
            </el-radio-group>
        </div>
    </el-card>
    <el-card class="margin-top">
        <template #header>
            <div class="card-header">
                <span>按钮样式</span>
            </div>
        </template>
            <div>
                <el-radio-group v-model="radio31">
                <el-radio label="1" size="large" border>Option A</el-radio>
                <el-radio label="2" size="large" border>Option B</el-radio>
                </el-radio-group>
            </div>
            <div style="margin-top: 20px">
                <el-radio-group v-model="radio32">
                <el-radio label="1" border>Option A</el-radio>
                <el-radio label="2" border>Option B</el-radio>
                </el-radio-group>
            </div>
            <div style="margin-top: 20px">
                <el-radio-group v-model="radio33" size="small">
                <el-radio label="1" border>Option A</el-radio>
                <el-radio label="2" border disabled>Option B</el-radio>
                </el-radio-group>
            </div>
            <div style="margin-top: 20px">
                <el-radio-group v-model="radio34" size="small" disabled>
                <el-radio label="1" border>Option A</el-radio>
                <el-radio label="2" border>Option B</el-radio>
                </el-radio-group>
            </div>
    </el-card>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const radio = ref('selected and disabled')
const radio1 = ref('1')
const radio2 = ref('1')
const radio3 = ref('1')
const radio11 = ref(3)
const radio21 = ref('New York')
const radio22 = ref('New York')
const radio23 = ref('New York')

const radio31 = ref('1')
const radio32 = ref('1')
const radio33 = ref('1')
const radio34 = ref('1')
</script>
<style scoped lang="scss">
.mb-2{
    margin-bottom: 0.5rem;
}
.my, .my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.text-sm{
    font-size: 0.875rem;
    line-height: 1.25rem;
}
</style>